<template>
  <GlobalContainer className="!bg-[#fff]" :backgroundImage="`${OSS_URL}/images/jiaofei/jiaofei_bg.png`">
    <GlobalHeader title="物品借用" :fixed="true" showBack :backgroundImage="`${OSS_URL}/images/jiaofei/jiaofei_bg.png`" />
    <div class="rounded-20 bg-[#fff] p-32 pb-200">
      <div class="list-c">
        <div class="tool-item mb-40 flex items-center" v-for="item in rentGoodsList" :key="item.id">
          <div class="left flex items-center">
            <div class="img border-radius-4 size-100 overflow-hidden">
              <image :src="item.images" class="size-100" />
            </div>
            <div class="ml-20">
              <div class="mb-10 text-30 leading-40 text-[#303133]">{{ item.name }}</div>
              <div class="text-26 leading-36 text-[#909399]">剩余 {{ item.remainingQuantity }}</div>
            </div>
          </div>
          <div class="right ml-auto flex items-center">
            <div class="btn" @tap.stop="subQuantity(item)">
              <image src="../../static/images/jieyong/sub_icon.png" class="size-36" />
            </div>
            <div class="num">{{ item.quantity }}</div>
            <div class="btn" @tap.stop="addQuantity(item)">
              <image src="../../static/images/jieyong/add_icon.png" class="size-36" />
            </div>
          </div>
        </div>
      </div>
      <div class="payment-btn flex w-full flex-col px-30 pb-safe">
        <div class="select-num mt-22 flex items-center">
          <div>共计</div>
          <span class="mx-8 font-medium text-[#F04864]">{{ totalSelectGoods }}</span>
          <div>件物品</div>
        </div>
        <div class="flex h-134 items-center justify-between">
          <div class="btn w-full" :class="[totalSelectGoods === 0 ? 'btn-default' : 'btn-primary']" @tap.stop="confirmRent">确认借用</div>
        </div>
      </div>
    </div>
  </GlobalContainer>
</template>
<!--  -->

<script setup>
import { computed } from 'vue'
import { showModal, showToast } from '@/utils'
import { getRentGoodsPage, applyBorrow } from '@/common/api/report'
const OSS_URL = import.meta.env.VITE_OSS_URL
const rentGoodsList = ref([])
// 已选物品数量
const totalSelectGoods = computed(() => {
  return rentGoodsList.value.filter(item => item.quantity > 0).length
})
const getRentGoodsPList = async () => {
  const res = await getRentGoodsPage({
    pageNo: 1,
    pageSize: 9999
  })
  console.log('[ getRentGoodsPList ] >', res)
  rentGoodsList.value = res.records.map(item => {
    return {
      ...item,
      quantity: 0
    }
  })
}

// 减少物品数量
const subQuantity = item => {
  if (item.quantity > 0) {
    item.quantity--
  }
}
// 增加物品数量
const addQuantity = item => {
  if (item.quantity < item.remainingQuantity) {
    item.quantity++
  } else {
    showToast('剩余数量不足')
  }
}
// 确认借用
const confirmRent = () => {
  console.log('[ confirmRent ] >')
  if (totalSelectGoods.value === 0) {
    return
  }
  const params = {
    borrowDetailVOList: rentGoodsList.value
      .map(item => {
        return {
          goodId: item.id,
          num: item.quantity
        }
      })
      .filter(item => item.num > 0)
  }
  showModal({
    title: '确认借用',
    content: '确认借用物品？',
    confirmText: '确认',
    cancelText: '取消',
    success: () => {
      applyBorrow(params).then(res => {
        if (res) {
          uni.navigateBack()
        }
      })
    },
    cancel: () => {
      console.log('[ cancel ] >')
    }
  })
}
getRentGoodsPList()
</script>

<style scoped lang="scss">
.tool-item {
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56rpx;
    height: 56rpx;
    border-radius: 10rpx;
    background: #f0f2f5;
  }
  .num {
    margin: 0 4rpx;
    width: 72rpx;
    height: 56rpx;
    line-height: 56rpx;
    text-align: center;
    font-size: 24rpx;
    font-weight: 400;
    background: #f0f2f5;
  }
}
.payment-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  padding-left: 30rpx;
  box-shadow: 0rpx -2rpx 12rpx 0rpx rgba(89, 118, 178, 0.15);
  .select-num {
    font-size: 26rpx;
    color: #303133;
    line-height: 40rpx;
  }
  .btn {
    height: 94rpx;
    line-height: 94rpx;
    text-align: center;
    font-size: 32rpx;
    color: #fff;
    border: 1px solid;
    background: #ffffff;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
  }
  .btn-default {
    color: #ffffff;
    background: #c7c9cc;
    border-color: #cdd0d6;
  }
  .btn-primary {
    background: #1e90ff;
  }
}
</style>
